<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- layui样式 -->
    <link rel="stylesheet" href="../../component/layui/css/layui.css">
    <title>上传附件</title>
    <style>
        #code {
            width: calc(100% - 200px);
            float: left;
            margin-right: 8px;
        }

        .layui-col-space15 {
            margin: 0px;
        }
    </style>
    <script src="../../js/myUtils.js"></script>
</head>

<body style="background-color: #ffffff">

    <form class="layui-form" action="">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" pad15="">
                        <div class="layui-row layui-col-space1">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal"
                                    id="mutiFileList">选择多文件</button>
                                <div class="layui-upload-list">
                                    <table class="layui-table">
                                        <thead>
                                            <tr>
                                                <th>文件名</th>
                                                <th>大小</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="fileList"></tbody>
                                    </table>
                                </div>
                                <button type="button" class="layui-btn" id="mutiFileListAction">开始上传</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- layui JS -->
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
        var locationParams = myUtils.GetRequest()
        // console.log("上传附件：", locationParams)
        layui.use(['form', 'jquery', 'layer', 'upload', 'Api'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                upload = layui.upload,
                Api = layui.Api;

            var nameList = layui.data('fileList').fileName
            var id = locationParams.id
            var stage = locationParams.stage
            if (stage == '0') {
                nameList = nameList.stageOne
            } else if (stage == '1') {
                nameList = nameList.stageTwo
            }
            var url = Api.uploadAttach + '?reportId=' + id + '&stage=' + stage
            //多文件列表示例
            var fileListView = $('#fileList')
                , uploadListIns = upload.render({
                    elem: '#mutiFileList'
                    , url: url
                    , method: 'post'  // 可选项。HTTP类型，默认post
                    , accept: 'file'
                    , field: 'files'
                    , multiple: true
                    , auto: false
                    , bindAction: '#mutiFileListAction'
                    , choose: function (obj) {
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        for (let i in files) {
                            let name = files[i].name
                            if (nameList.indexOf(name) != -1) {
                                // console.log("文件已经存在: ", name)
                                layer.open({
                                    title: '警告！'
                                    , content: name + '文件已经存在，继续上传将覆盖原文件！'
                                });
                            }
                        }
                        obj.preview(function (index, file, result) {
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td>' + file.name + '</td>'
                                , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                                , '<td>等待上传</td>'
                                , '<td>'
                                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                , '</td>'
                                , '</tr>'].join(''));

                            //删除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            fileListView.append(tr);
                        });
                    }
                    , done: function (res, index, upload) {
                        // console.log("upload done res: ", res)
                        if (res.errno == 0) { //上传成功
                            layer.msg('上传成功!', { icon: 1 })
                            var tr = fileListView.find('tr#upload-' + index)
                                , tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作

                            setTimeout(() => {
                                parent.location.reload()
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index); //关闭当前页
                            }, 2000);
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        } else {
                            layer.msg(res.errmsg, {
                                icon: 2
                            })
                        }
                        this.error(index, upload);
                    }
                    , error: function (index, upload) {
                        var tr = fileListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    }
                });

        });
    </script>

</body>

</html>